<template>
    <div class='tmp'>
        <imglunbo :swipelist='swipelist'></imglunbo>
        <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/news/newslist">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">新闻资讯</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/picture/pictureshow">
                    <span class="mui-icon mui-icon-email"></span>
                    <div class="mui-media-body">图片分享</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/photo/goodslist">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">商品展示</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">留言反馈</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">搜索资讯</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">联系我们</div></a></li>
            </ul>
        </div>
    </div>
</template>
<script>
    import common from './field/getfield.js'
    import imglunbo from './imglunbo/imglunbo.vue'
    export default{
        data(){
            return {
                swipelist: [{
                    url: 'https://www.baidu.com/',
                    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487958788112&di=d03e4e89f34ae7c49d7fe5278f1b98e5&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F17%2F76%2F85%2F15Y58PICsGr_1024.jpg'
                }, {
                    url: 'https://www.baidu.com/',
                    img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487958865904&di=11a38f8c1b6b1c99f67063c369b51bb9&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F16%2F94%2F12%2F78658PICcVx_1024.jpg'
                }]
            }
        },
        components:{
            imglunbo:imglunbo
        },
        methods:{
            getimglist(){
//                let url=common.apidomain+'/api/getlunbo';
//                this.$http.get(url)
//                    .then(res=>{
//                        this.swipelist=res.body.message;
//                        console.log(this.swipelist)
//                    })
            }
        },
        created(){
            this.getimglist()
        }

    }
</script>
<style class='scoped'>
    .tmp .mui-content,.tmp1 .mui-grid-view.mui-grid-9{
        background: #FFFFFF;
    }
    .tmp .lunbo{
        height: 250px;
    }
    .mint-swipe-items-wrap>div > a > img{
        width: 100%;
        height: 100%;
    }
    .tmp .mui-icon:before{
        content: '';
    }
    .tmp .mui-icon.mui-icon-home{
        background: url("../../statics/imgs/tu1.png");
    }
    .tmp .mui-icon.mui-icon-email{
        background: url("../../statics/imgs/tu2.png");
    }
    .tmp .mui-icon.mui-icon-chatbubble{
        background: url("../../statics/imgs/tu3.png");
    }
    .tmp .mui-icon.mui-icon-location{
         background: url("../../statics/imgs/tu6.png");
    }
    .tmp .mui-icon.mui-icon-search{
          background-image: url("../../statics/imgs/tu4.png");
    }
    .tmp .mui-icon.mui-icon-phone{
        background-image: url("../../statics/imgs/tu5.png");
    }
    .tmp .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border-right: 0px;
        border-bottom: 0px;
    }
    .mui-grid-view.mui-grid-9{
        background: #FFFFFF !important;
    }
    .tmp .mui-icon{
        width:50px;
        height: 50px;
        background-size: contain!important;
    }
</style>